<template>
  <el-container class="home-container">
    <!-- 头部 -->
    <el-header class="header-class">
      <h1><i class="el-icon-s-promotion"></i>&nbsp;&nbsp;小飞侠运营平台</h1>

      <el-button type="info" @click="logout">退出登陆</el-button>
    </el-header>

    <el-container>
      <el-aside :width="isCollapse?'64px':'210px'">

<!-- 做一个可点击展开关闭 -->
<div class="toggle-button" @click="toggleCollapse" > || </div>


        <el-row>
          <el-col :span="24">
            <el-menu
              default-active="2"
              class="el-menu-vertical-demo"
              @open="handleOpen"
              @close="handleClose"
              background-color="#F0F2F2"
              text-color=""
              active-text-color="#ffd04b"
              :collapse="isCollapse"
              :collapse-transition="false"
              :router="true"

           
            >
               <!-- 单个展开: unique-opened="true"  可折叠: collapse="true"  关闭穿梭效果：collapse-transition="false"  能够跳转页面： :router="true"  -->
              <el-submenu
                
                :index="item.path===''?'':'/'+item.path"

                v-for="item in menulist"
                :key="item.id"
              >
                <template slot="title">
                  <i :class="item.icon"></i>
                  <span>{{ item.authName }}</span>
                </template>

                <el-menu-item  
                 :index="'/'+subitem.path"
                v-for="subitem in item.children"
                :key="subitem.id"
                >
                  <template slot="title">
                    <i :class="subitem.icon"></i>
                    <span>{{ subitem.authName }}</span>
                  </template>
                </el-menu-item>


              </el-submenu>
            </el-menu>
          </el-col>
        </el-row>
      </el-aside>

      <!-- 中间部分 -->
      <el-main> 


          <!-- 路由占位符 -->
          <router-view></router-view>


      </el-main>

      <!-- 底部 -->
      <!-- <el-footer>Footer</el-footer> -->
    </el-container>
  </el-container>
</template>

<script>
export default {
  data() {

    return {
      isCollapse:false,//菜单是否可折叠
      menulist: [],
    }
  },
  created() {
    this.menulist = [
        {
            "id": "1",
            "authName": "系统设置",
            "path": "",
            "icon": "el-icon-setting",
            "children": [
                {
                    "id": "1-1",
                    "authName": "用户管理",
                    "path": "users",
                    "icon": "el-icon-user-solid",
                    "children": null
                },
                {
                    "id": "1-2",
                    "authName": "通用配置",
                    "path": "setting",
                    "icon": "el-icon-s-tools",
                    "children": null
                }
            ]
        },
        {
            "id": "2",
            "authName": "订单管理",
            "path": "",
            "icon": "el-icon-goods",
            "children": [
                {
                    "id": "2-1",
                    "authName": "待付款",
                    "path": "wating",
                    "icon": "el-icon-s-promotion",
                    "children": null
                },
                {
                    "id": "2-2",
                    "authName": "已完成订单",
                    "path": "complete",
                    "icon": "el-icon-check",
                    "children": null
                }
            ]
        }
    ]

  },
  name: 'Home',
  methods: {

  
    //切换菜单折叠
    toggleCollapse (){
        this.isCollapse = !this.isCollapse;
    }

    ,
    logout() {
      //登出
      //清除sessionStorage
      window.sessionStorage.clear()
      //跳转到 登陆页面
      this.$router.push('/login')
    },

    handleOpen(key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath)
    },
  },
}
</script>

<style lang="less" scoped>

.toggle-button{// 折叠按钮
  background-color:#F0F0F0;
  font-size: 10px;
  line-height: 24px;
  color:black;
  text-align: center;
  letter-spacing: 0.2em;
  cursor: pointer;
}

.header-class {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.home-container {
  height: 100%;
}

.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
}
</style>
